import React from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import oauthRely from '../../../../../nmb/oauth2/oauth2rely'

import { Card, Button, Alert, Spin } from 'antd'
import { modalTip } from 'nmbc/ModalTip'
import { actions as myActions} from '../../../store/modules/my'


class MyHome extends React.Component {
  static contextTypes = {
    store: React.PropTypes.object,
    router: React.PropTypes.object
  };

  constructor(props, context) {
    super(props, context);
  }

  render() {
    const {location, router} = this.props;
    const { push , replace} = router;

    let queries = [];
    if (location.query != undefined) {
      for (let key in location.query) {
        queries.push(<h5>{key} = {location.query[key]}</h5>)
      }
    }

    const userInfo = oauthRely.getLogonUser();

    return (
      <div style={{ width: '95%', margin: '10px auto' }}>

        <Card title="login demo"  style={{marginTop: '10px'}}>
          <Alert message={ userInfo === undefined ?
            <h4>请登录!</h4>:
            <h4>欢迎：{userInfo.UserName}</h4>
          } type="info" />

          {userInfo === undefined ?
            <Button type="primary" onClick={()=>{
              oauthRely.checkLogon(location, replace);
            }}>登录</Button>:
            <Button onClick={()=>{
              oauthRely.logout(location);
            }}>登出</Button>
          }
        </Card>

        <Card title="modal tip demo"  style={{marginTop: '10px'}}>
          <Button type="danger" onClick={()=>{
            modalTip.error({
              name: 'InvalidLogonIdentityException',
              code: 100110,
              message: '未能检测到有效的登录身份，请重新登录'
            });
          }}>error</Button>
          <Button onClick={()=>{
            modalTip.info('纯文字的提示');
          }}>info</Button>
          <Button onClick={()=>{
            modalTip.warning('我只是个最基本的警告');
          }}>warning</Button>
          <Button onClick={()=>{
            modalTip.warning(<div><p style={{ color: 'red'}}>这个是个段落，而且是个红字</p><p>而且他还有个自定义标题</p></div>, '自定义提示标题');
          }}>warning2</Button>
          <Button onClick={()=>{
            modalTip.success('我成功了....');
          }}>success</Button>
        </Card>

        <div>
          <Spin spinning={this.props.my.pending} tip="请求中..请骚后...">
            <Card title="API demo" style={{marginTop: '10px'}}>
              <p>{this.props.my.result}</p>
              <p><Button onClick={this.demoGet}>GET</Button>
                <Button onClick={this.demoPost}>POST</Button>
                <Button onClick={()=>{this.props.myFetches.getDemoWithoutAuth('我是不用认证的')}}>GET Without auth</Button>
              </p>
            </Card>
          </Spin>
        </div>

      </div>
    );
  }

  demoGet = () => {
    this.props.myFetches.getDemo('我是GET来的');
  };

  demoPost = () =>{
    this.props.myFetches.postDemo();
  };
}

const stateToProps = (state) => ({
  my: state.my
});

const dispatchToProps = (dispatch) => {
  return {
    myFetches: bindActionCreators(myActions, dispatch)
  }
};

export default connect(stateToProps, dispatchToProps)(MyHome)